<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="取消订单" unmount-on-close>
    <div class="tips-text">订单取消后，状态为待生成、生成失败和未发起的合同也将会无效，确认是否取消当前订单？</div>

    <page-form class="page-form" :model="form" layout="vertical" ref="formRef" :gutter="56">
      <page-form-item field="refundAmount" label="退款" size="1/2">
        <i-input-number v-model="form.refundAmount" />
      </page-form-item>
      <page-form-item field="breachAmount" label="违约金" size="1/2">
        <i-input-number v-model="form.breachAmount" />
      </page-form-item>
      <page-form-item field="cancelRemark" label="取消订单备注" size="1">
        <i-textarea v-model="form.cancelRemark" />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { calcPrice, cancel } from '@/api/order/czsOrder'
  import { Notification } from '@arco-design/web-vue'
  import iTextarea from '@/views/order/long-order/components/i-textarea.vue'
  const visible = ref(false)
  const form = ref({})
  const emit = defineEmits(['ok'])
  const open = (record) => {
    visible.value = true
    form.value = {
      id: record.id,
      refundAmount: record.totalAmount,
    }
    const param = {
      type: 4,
      id: record.id,
    }
    calcPrice(param).then((res) => {
      const result = res.result
      form.value.breachAmount = result.breachAmount
    })
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    cancel(param)
      .then(() => {
        Notification.success('保存成功')
        visible.value = false
        emit('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }

  .tips-text {
    height: 20px;
    font-size: 14px;
    color: #165dff;
    line-height: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
</style>
